@mixin float($dir: left, $margin-opposite: $elgg-value-large) {
	@if $dir == left {
		float: left;
		margin-right: $margin-opposite;
		} @else {
		float: right;
		margin-left: $margin-opposite;
	}
}

@mixin elgg-divide($top: 0px, $right: 0px, $bottom: 0px, $left: 0px, $color: $border-color) {

	border-width: $top $right $bottom $left;
	border-style: solid;
	border-color: $color;

}

// slightly modified grid-column mixin (to allow us define total number columns)
@mixin elgg-col($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false, $total-columns: $total-columns) {

	// If collapsed, get rid of gutter padding
	@if $collapse {
		padding-left: 0;
		padding-right: 0;
	}

	// Gutter padding whenever a column isn't set to collapse
	// (use $collapse:null to do nothing)
	@else if $collapse == false {
		padding-left: $column-gutter / 2;
		padding-right: $column-gutter / 2;
	}

	// If a column number is given, calculate width
	@if $columns {
		width: gridCalc($columns, $total-columns);

		// If last column, float naturally instead of to the right
		@if $last-column { float: $opposite-direction; }
	}

	// If offset, calculate appropriate margins
	@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }

	// Source Ordering, adds left/right depending on which you use.
	@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
	@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }

	// If centered, get rid of float and add appropriate margins
	@if $center {
		margin-#{$default-float}: auto;
		margin-#{$opposite-direction}: auto;
		float: none !important;
	}

	@if $float {
		@if $float == left or $float == true { float: $default-float; }
		@else if $float == right { float: $opposite-direction; }
		@else { float: none; }
	}

	// This helps us not need to repeat "position:relative" everywehere
	@if $include-position-relative { position: relative; }

}


@mixin elgg-image-block($gutter: $elgg-value-small, $img-class: '.elgg-image', $img-alt-class: '.elgg-image-alt') {
	@include clearfix;
	#{$img-class} {
		float: left;
		margin-right: $gutter;
	}
	#{$img-alt-class} {
		float: right;
		margin-left: $gutter;
	}
}

@mixin elgg-list($item-dividers: true, $item-selector: 'li') {
	@include clearfix;
	overflow: hidden;
	margin: 0;
	padding: 0;
	& > #{$item-selector} {
		@include clearfix;
		position: relative;
		padding: $elgg-value-small;
		@if ($item-dividers) {
			border-color: $elgg-list-divider-color;
			border-style: $elgg-list-divider-style;
			border-width: 0;
			border-top-width: $elgg-list-divider-width;
			&:first-child {
				margin-top: $elgg-value-small;
			}
			&:last-child {
				border-bottom-width: $elgg-list-divider-width;
				margin-bottom: $elgg-value-small;
			}
		}
	}
}

@mixin elgg-gallery($gutter: $elgg-value-small, $tile-border: none, $tile-background: none, $tile-selector: 'li') {
	@include clearfix;
	& > #{$tile-selector} {
		display: inline-block;
		vertical-align: top;
		margin: $gutter / 2;
		padding: 1px;
		border: $tile-border;
		background: $tile-background;
	}
}

@mixin elgg-module($type: 'aside', $head-selector: '.elgg-head', $body-selector: '.elgg-body', $foot-selector: '.elgg-foot') {

	margin-bottom: emCalc(30px);

	@if ($type == 'popup') {
		background: white;
		border: $hr-border-width $hr-border-style darken($elgg-module-color-base, 20%);
		@include single-box-shadow($color: $elgg-module-color-base);
		} @else if ($type == 'widget') {
		border: $hr-border-width $hr-border-style darken($elgg-module-color-base, 20%);
		} @else if ($type == 'featured') {
		background: white;
		border: $hr-border-width $hr-border-style $elgg-module-color-highlight;
	}

	& > #{$head-selector} {
		@include clearfix;
		padding: $elgg-value-small/2 $elgg-value-small;
		h1, h2, h3, h4, h5, h6 {
			font-size: emCalc(18px);
			line-height: emCalc(25px);
			margin: 0;
			font-weight: normal;
		}
		@if ($type == 'aside') {
			border-bottom: $hr-border-width $hr-border-style $hr-border-color;
			} @else if ($type == 'info') {
			background: $elgg-module-color-base;
			border-bottom: $hr-border-width $hr-border-style darken($elgg-module-color-base, 20%);
			padding: $elgg-value-small/2 $elgg-value-small;
			} @else if ($type == 'popup') {
			background: $elgg-module-color-base;
			} @else if ($type == 'widget') {
			background: $elgg-module-color-base;
			border-bottom: $hr-border-width $hr-border-style darken($elgg-module-color-base, 20%);
			h3 {
				white-space: nowrap;
				height: emCalc(25px);
				overflow: hidden;
				text-indent: 20px;
				margin: 0;
				padding: 0;
			}
			} @else if ($type == 'featured') {
			background: $elgg-module-color-highlight;
			border-bottom: $hr-border-width $hr-border-style darken($elgg-module-color-highlight, 5%);
			color: white;
			* {
				color: white;
			}
		}
	}

	& > #{$body-selector} {
		@include clearfix;
		padding: $elgg-value-small;
		@if ($type == 'popup') {
			background: white;
		}
	}
	& > #{$foot-selector} {
		@include clearfix;
		padding: $elgg-value-small;
	}
}

@mixin elgg-button($padding: $button-med, $bg: $primary-color, $radius: $global-radius, $full-width: false, $disabled: false, $is-input: false, $is-prefix: false) {
	@include button($padding, $bg, $radius, $full-width, $disabled, $is-input, $is-prefix);
}

@mixin elgg-tabs($gutter: $elgg-value-medium, $border-color: $border-color, $border-width: $hr-border-width) {

	$border: $border-width $border-color solid;

	border-bottom: $border;
	display: table;
	width: 100%;

	li {

		border: $border;
		border-bottom: 0;
		background: lighten($border-color, 15%);
		margin: 0;
		width: 100%;
		a {
			text-decoration: none;
			display: block;
			padding: 0 $gutter;
			text-align: center;
			font-size: emCalc(15px);
			line-height: emCalc(35px);
			color: darken($border-color, 30%);
			background: lighten($border-color, 5%);;
			&:hover {
				color: darken($border-color, 40%);
				background: lighten($border-color, 3%);;
			}
		}

		&.elgg-state-selected {
			background: white;
			a, a:hover {
				color: darken($border-color, 40%);
				top: $border-width;
				background: white;
				position: relative;
			}
		}
	}

	@media #{$small} {
		@include radius(none);
		li {
			@include radius($global-radius $global-radius 0 0);
			float: left;
			width: auto;
			margin: 0 0 0 $gutter;
			a {
				@include radius($global-radius $global-radius 0 0);
			}
		}
	}
}

@mixin toolbar-notifier($bg: $alert-color, $color: #fff) {
	background: $bg;
	color: $color;
	height: emCalc(25px);
	line-height: emCalc(25px);
	text-align: center;
	display: inline-block;
	padding: 0 3px;
	font-weight: bold;
	overflow: visible;
	margin: 0;
	position: relative;
	left: -3px;
	top: -7px;
	font-size: 10px;
	@include box-shadow(none);
	@include box-sizing(content-box);
	@include radius;
}